import ajaxFn from '../../js/ajax';
import '../../css/base.css';
import './css/explore.css';
/* eslint-disable no-undef */
window.addEventListener('load', () => {
  init();
});

// 初次渲染函数
async function init() {
  getAllData();
  await getNatureData();
  await getCityData();
  await getSportData();
  await getPersonData();
  await getSignData();
  renderAllData();
}

// 获取自然到签约摄影师的所有图片
async function getAllData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/case/getAll',
      method: 'GET',
      data: {
        projectId: 18,
        limit: 100,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    let data = res.data.rows;
    let imgArr = [];
    let heightArr = [];
    // console.log(data);
    for (let i = 0; i < data.length; i++) {
      if (
        data[i].w_classifies[0].name == '热门航拍点' ||
        data[i].w_classifies[0].name == '热门标签'
      ) {
        continue;
      } else {
        imgArr.push(data[i].cover);
        const height = data[i].sketch.split('*')[1];
        heightArr.push(height);
      }
    }
    allImgArr.push(imgArr, heightArr);
    // console.log(allImgArr);
  } catch (error) {
    console.log(error);
  }
}

// 获得自然的所有图片
async function getNatureData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 16,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let imgArr = [];
    let heightArr = [];
    for (let i = 0; i < data.length; i++) {
      imgArr.push(data[i].cover);
      const height = data[i].sketch.split('*')[1];
      heightArr.push(height);
    }
    natureImgArr.push(imgArr, heightArr);
    // console.log(natureImgArr);
  } catch (error) {
    console.log(error);
  }
}

// 获得城市的所有图片
async function getCityData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 34,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let imgArr = [];
    let heightArr = [];
    for (let i = 0; i < data.length; i++) {
      imgArr.push(data[i].cover);
      const height = data[i].sketch.split('*')[1];
      heightArr.push(height);
    }
    cityImgArr.push(imgArr, heightArr);
    // console.log(cityImgArr);
  } catch (error) {
    console.log(error);
  }
}

// 获得运动的所有图片
async function getSportData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 42,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let imgArr = [];
    let heightArr = [];
    for (let i = 0; i < data.length; i++) {
      imgArr.push(data[i].cover);
      const height = data[i].sketch.split('*')[1];
      heightArr.push(height);
    }
    sportImgArr.push(imgArr, heightArr);
    // console.log(sportImgArr);
  } catch (error) {
    console.log(error);
  }
}

// 获得人物的所有图片
async function getPersonData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 43,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let imgArr = [];
    let heightArr = [];
    for (let i = 0; i < data.length; i++) {
      imgArr.push(data[i].cover);
      const height = data[i].sketch.split('*')[1];
      heightArr.push(height);
    }
    personImgArr.push(imgArr, heightArr);
    // console.log(personImgArr);
  } catch (error) {
    console.log(error);
  }
}

// 获得签约摄影师的所有图片
async function getSignData() {
  try {
    let res = await ajaxFn({
      baseUrl: 'http://118.89.59.227:7001',
      url: '/api/web/classify/getById',
      method: 'GET',
      data: {
        projectId: 18,
        id: 44,
      },
      headers: {
        'Content-type': 'application/json; charset=UTF-8',
      },
    });
    // console.log(res);
    let data = res.data.w_cases;
    let imgArr = [];
    let heightArr = [];
    for (let i = 0; i < data.length; i++) {
      imgArr.push(data[i].cover);
      const height = data[i].sketch.split('*')[1];
      heightArr.push(height);
    }
    signImgArr.push(imgArr, heightArr);
    // console.log(imgArr6);
  } catch (error) {
    console.log(error);
  }
}

// 全部图片的数组
let allImgArr = [];
// 自然图片的数组
let natureImgArr = [];
// 城市图片的数组
let cityImgArr = [];
// 运动图片的数组
let sportImgArr = [];
// 人物图片的数组
let personImgArr = [];
// 签约摄影师图片的数组
let signImgArr = [];
// mainBottom主体
let mainBottom = document.querySelector('main>.main-bottom');
// 要展示的图片容器
let ul = document.querySelector('.main-bottom>ul');
// 导航点击的所有li
let liList = document.querySelectorAll('.main-nav>ul>li');
// 第一次渲染的页面滚动到最顶部的标识
let topFlag = true;
// 记录li选中的索引
let index = 0;
// 记录li上次选中的索引
let lastIndex = 0;
// 记录截取数组的开始坐标
let start = 0;
// 记录截取数组的结束坐标
let end = 10;
// 切割后图片的数据
let sliceImgData = [];
// 切割后高度的数据
let sliceHeightData = [];
// 图片原始宽度
const imgWidth = 550;
// 图片实际宽度
const imgRealWidth = Number(ul.offsetWidth * 0.23);
// 是否加载
let isLoad = true;
// 置顶
let toTop = document.querySelector('.toTop');
let flag = true;

window.addEventListener('scroll', () => {
  if (flag) {
    if (
      document.documentElement.scrollTop >=
      document.documentElement.clientHeight
    ) {
      toTop.classList.add('show');
    } else {
      toTop.classList.remove('show');
      toTop.style.cssText = 'bottom: 25%';
    }
  }
  if (
    document.documentElement.scrollTop +
      document.documentElement.clientHeight >=
      ul.offsetTop + ul.offsetHeight &&
    isLoad
  ) {
    console.log('到底了');
    isLoad = false;
    if (start < allImgArr[0].length) {
      setTimeout(() => {
        renderAllData();
        isLoad = true;
      }, 2000);
    } else {
      return;
    }
  }
});

// 置顶方法
function moveTop() {
  document.documentElement.scrollTo({
    top: 0,
    left: 0,
    behavior: 'smooth',
  });
  timer = setInterval(() => {
    clearInterval(timer);
    toTop.classList.remove('show');
    // 重置行内样式
    toTop.style.cssText = 'bottom: 25%';
    flag = true;
    return;
  }, 20);
}

// 置顶点击事件
toTop.addEventListener('click', () => {
  flag && moveTop();
  flag = false;
});

// 更改导航样式方法
function changeNav() {
  liList = document.querySelectorAll('.main-nav>ul>li');
  liList[lastIndex].classList.remove('active-li');
  liList[index].classList.add('active-li');
  // for (let i = 0;)
  // if (index == lastIndex) {
  //   flagArr[index] = true;
  // } else {
  //   flagArr[index] = ;

  // }
  // flagArr[lastIndex] = false;
  lastIndex = index;
}

// 展示全部图片方法
function renderAllData() {
  index = 0;
  isLoad = true;
  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 切割图片数据
  sliceImgData = allImgArr[0].slice(start, end);
  // 切割高度数据
  sliceHeightData = allImgArr[1].slice(start, end);

  // let str = "";
  // 先清空ul里的内容
  // ul.innerHTML = "";
  for (let i = 0; i < sliceImgData.length; i++) {
    // str += `<li>
    //   <img src="${sliceData[i]}" alt="全部" class="lazy">
    // </li>`;
    // 图片原始的高度
    const imgHeight = Number(sliceHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = sliceImgData[i];
    img.alt = '全部';
    img.className = 'lazy';
    li.appendChild(img);
  }
  // setTimeout(() => {
  lazyload();
  // 第一次进入页面的时候默认在最上面
  if (topFlag) {
    setTimeout(() => {
      document.documentElement.scrollTo({
        top: 0,
      });
    }, 50);
    topFlag = false;
  }
  // }, 1000);
  window.onresize = full;
  // 截取开始坐标
  start = end;
  // 截取结束坐标
  end += 10;
}

// 展示自然图片方法
function renderNatureData() {
  index = 1;
  isLoad = false;

  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 自然图片数据
  let natureImgData = natureImgArr[0];
  // 自然高度数据
  let natureHeightData = natureImgArr[1];
  // 先清空ul里的内容
  ul.innerHTML = '';
  for (let i = 0; i < natureImgData.length; i++) {
    // 图片原始的高度
    const imgHeight = Number(natureHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = natureImgData[i];
    img.alt = '自然';
    img.className = 'lazy';
    li.appendChild(img);
  }

  lazyload();
  // 第一次进入页面的时候默认在最上面
  setTimeout(() => {
    document.documentElement.scrollTo({
      top: 0,
    });
  }, 50);
  window.onresize = full;
}

// 展示城市图片方法
function renderCityData() {
  index = 2;
  isLoad = false;

  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 城市图片数据
  let cityImgData = cityImgArr[0];
  // 城市高度数据
  let cityHeightData = cityImgArr[1];
  // console.log(cityImgArr);
  // 先清空ul里的内容
  ul.innerHTML = '';
  for (let i = 0; i < cityImgData.length; i++) {
    // 图片原始的高度
    const imgHeight = Number(cityHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = cityImgData[i];
    img.alt = '城市';
    img.className = 'lazy';
    li.appendChild(img);
  }

  lazyload();
  // 第一次进入页面的时候默认在最上面
  setTimeout(() => {
    document.documentElement.scrollTo({
      top: 0,
    });
  }, 50);
  window.onresize = full;
}

// 展示运动图片方法
function renderSportData() {
  index = 3;
  isLoad = false;

  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 运动图片数据
  let sportImgData = sportImgArr[0];
  // 运动高度数据
  let sportHeightData = sportImgArr[1];
  // console.log(sportImgArr);
  // 先清空ul里的内容
  ul.innerHTML = '';
  for (let i = 0; i < sportImgData.length; i++) {
    // 图片原始的高度
    const imgHeight = Number(sportHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = sportImgData[i];
    img.alt = '运动';
    img.className = 'lazy';
    li.appendChild(img);
  }

  lazyload();
  // 第一次进入页面的时候默认在最上面
  setTimeout(() => {
    document.documentElement.scrollTo({
      top: 0,
    });
  }, 50);
  window.onresize = full;
}

// 展示人物图片方法
function renderPersonData() {
  index = 4;
  isLoad = false;

  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 人物图片数据
  let personImgData = personImgArr[0];
  // 人物高度数据
  let personHeightData = personImgArr[1];
  // console.log(personImgArr);
  // 先清空ul里的内容
  ul.innerHTML = '';
  for (let i = 0; i < personImgData.length; i++) {
    // 图片原始的高度
    const imgHeight = Number(personHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = personImgData[i];
    img.alt = '人物';
    img.className = 'lazy';
    li.appendChild(img);
  }

  lazyload();
  // 第一次进入页面的时候默认在最上面
  setTimeout(() => {
    document.documentElement.scrollTo({
      top: 0,
    });
  }, 50);
  window.onresize = full;
}

// 展示签约摄影师图片方法
function renderSignData() {
  index = 5;
  isLoad = false;

  changeNav();
  ul = document.querySelector('.main-bottom>ul');
  // 签约摄影师图片数据
  let signImgData = signImgArr[0];
  // 签约摄影师高度数据
  let signHeightData = signImgArr[1];
  // console.log(signImgArr);
  // 先清空ul里的内容
  ul.innerHTML = '';
  for (let i = 0; i < signImgData.length; i++) {
    // 图片原始的高度
    const imgHeight = Number(signHeightData[i]);
    let li = document.createElement('li');
    ul.appendChild(li);
    // 图片实际高度
    const imgRealHeight = (imgHeight * imgRealWidth) / imgWidth;
    // console.log(imgRealHeight);
    // 先把图片容器的高度设置好
    li.style.height = `${imgRealHeight}px`;
    // 接着使用瀑布流方法
    full();
    // 将容器进行瀑布流排列后再将图片地址写上
    let img = new Image();
    img.src = signImgData[i];
    img.alt = '签约摄影师';
    img.className = 'lazy';
    li.appendChild(img);
  }

  lazyload();
  // 第一次进入页面的时候默认在最上面
  setTimeout(() => {
    document.documentElement.scrollTo({
      top: 0,
    });
  }, 50);
  window.onresize = full;
}

// 点击全部的导航li
liList[0].addEventListener('click', () => {
  topFlag = true;
  // 点击的时候需要清空列表并把截取所需的下标重置为原来的
  ul.innerHTML = '';
  start = 0;
  end = 10;
  renderAllData();
});
// 点击自然的导航li
liList[1].addEventListener('click', renderNatureData);
// 点击城市的导航li
liList[2].addEventListener('click', renderCityData);
// 点击运动的导航li
liList[3].addEventListener('click', renderSportData);
// 点击人物的导航li
liList[4].addEventListener('click', renderPersonData);
// 点击签约摄影师的导航li
liList[5].addEventListener('click', renderSignData);

// 瀑布流方法
function full() {
  liList = document.querySelectorAll('.main-bottom>ul>li');
  mainBottom = document.querySelector('main>.main-bottom');
  // 设定每个元素间隙
  let space = 32;
  // 页面宽度
  const pWidth = window.innerWidth;
  // 一列的宽度
  const liWidth = liList[0].offsetWidth + space;
  // 列数
  let cols = Math.floor(pWidth / liWidth);
  // 创建一个数组存储成员的高度
  let heightArr = new Array(cols).fill(0);

  // 遍历所有元素，比较他们的高度，设置最小高度
  for (let i = 0; i < liList.length; i++) {
    // 获取元素真实高度
    const h = liList[i].offsetHeight;
    // 获取最小高度(拿当前遍历的元素高度比较)
    // const minH = Math.floor(...heightArr)
    // toSorted 新数组排序方法，和sort功能一致，区别是不会修改原数组
    const minH = heightArr.toSorted((a, b) => a - b)[0];
    const maxH = heightArr.toSorted((a, b) => b - a)[0];
    // 把最小高度的值重置(拿当前元素的高度 + 最小值的高度)
    // 获取最小值的下标
    const minIndex = heightArr.indexOf(minH);
    // 修改元素的位置
    // liList[i].style.cssText = `position: absolute;
    //         height: ${realHeight}px;
    //         top: ${minH}px;
    //         left: ${liWidth * minIndex}px;`; // 一次性写入样式
    // 这里不使用cssText，因为cssText会覆盖之前的样式，导致容器的高度消失
    liList[i].style.position = 'absolute';
    liList[i].style.top = `${minH}px`;
    liList[i].style.left = `${liWidth * minIndex}px`;
    mainBottom.style.cssText = `height: ${maxH + 0.5 * h + space}px`;
    // 渲染瀑布流后将页面滚动到下面(第一次渲染的时候不触发)
    if (!topFlag) {
      document.documentElement.scrollTo({
        top: 0.6 * maxH,
      });
    }
    // 修改最小高度的值(累加)
    heightArr[minIndex] += h + space;
  }
  // liList.forEach((el) => {

  // });
}

// 懒加载
function lazyload() {
  let imgList = document.querySelectorAll('.lazy');
  if (!imgList.length) return;
  // 使用交叉观察函数
  let io = new IntersectionObserver(
    (entries) => {
      // 回调函数
      // console.log(entries);
      // isIntersecting 当前元素是否可见(随着滚动自动更新)
      entries.forEach((item) => {
        if (item.isIntersecting) {
          // 有data-src图片就替换，没有就采用默认的src图片
          item.target.src = item.target.dataset.src || item.target.src;
          item.target.classList.remove('lazy');
          // 把当前图片元素移除观察监听(不需要继续观察，已经显示到页面到了)
          io.unobserve(item.target);
        }
      });
    },
    // 配置对象
    {
      // 不能与loading共存
      rootMargin: '450px 0px',
    }
  );
  imgList.forEach((el) => {
    // 开启监听 observe(监听的目标元素)
    io.observe(el);
  });
}
